<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bali</title>
  <link
    href="https://fonts.googleapis.com/css2?family=Caveat&family=Lora&family=Montserrat:wght@300;400;500;600&display=swap"
    rel="stylesheet">
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/slick.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/media.css">
</head>

<body>

  <header class="header" style="background-image: url(images/header-bg.png);">
    <div class="container">
      <div class="header-top">
        <div class="header__logo">
          <a href="#">Cool Trip</a>
        </div>
        <div class="header__menu">
          <div class="menu__btn">
            <div class="menu__btn-inner">
              <div class="menu__btn-line"></div>
              <div class="menu__btn-line"></div>
              <div class="menu__btn-line"></div>
            </div>
          </div>
          <ul class="menu__list">
            <li><a href="#">Маршрут</a></li>
            <li><a href="#">Стоимость</a></li>
            <li><a href="#">Фото и Видео</a></li>
            <li><a href="#">Контакты</a></li>
          </ul>
        </div>
      </div>

      <div class="header__content">
        <div class="header__content-title title animate__animated animate__fadeIn  animate__delay-1s">
          Познай чудеса Бали
          вместе с Cool Trip
        </div>

        <a class="header__content-btn animate__animated animate__fadeInLeftBig  animate__delay-2s" href="#">
          Хочу на Бали!
        </a>

        <div class="header__content-icons animate__animated animate__fadeInRightBig  animate__delay-2s">
          <a class="header__content-icon" href="#" style="background-image: url(images/youtube.svg);"></a>
          <a class="header__content-icon" href="#" style="background-image: url(images/twitter.svg);"></a>
          <a class="header__content-icon" href="#" style="background-image: url(images/vk.svg);"></a>
        </div>

        <div class="header__content-mouse">
          <div class="mouse">
            <div class="scroller"></div>
          </div>
          <div class="arrow">
            <img class="arrow__img" src="images/arrow.svg" alt="arrow">
          </div>
        </div>
      </div>
    </div>
  </header>

  <section class="about">
    <div class="container">
      <div class="title">
        <div class="about__title animate-right">Почему именно мы?</div>
      </div>
      <div class="about__items">
        <div class="about__item animate-bottom">
          <img class="about__item-img" src="images/about_icon1.svg" alt="icon1">
          <div class="about__item-title">Индивидуальный подход</div>
          <div class="about__item-text">Мы ориентируемся на ваши предпочтения</div>
        </div>
        <div class="about__item animate-bottom">
          <img class="about__item-img" src="images/about_icon2.svg" alt="icon1">
          <div class="about__item-title">Продуманный маршрут</div>
          <div class="about__item-text">Наше путешествие продуманно до мелочей</div>
        </div>
        <div class="about__item animate-bottom">
          <img class="about__item-img" src="images/about_icon3.svg" alt="icon1">
          <div class="about__item-title3">Большой опыт</div>
          <div class="about__item-text">Уже 10 лет дарим вам сказочные эмоции</div>
        </div>
        <div class="about__item animate-bottom">
          <img class="about__item-img" src="images/about_icon4.svg" alt="icon1">
          <div class="about__item-title4">Незабываемый отдых</div>
          <div class="about__item-text">Гарантируем что вы останетесь довольны</div>
        </div>
      </div>
    </div>
  </section>

  <section class="program">
    <div class="container">
      <div class="program__title title animate-left">Программа тура</div>
      <div class="program-slider">

        <div class="program-slider__item">
          <div class="program-slider__item-content">
            <div class="program-slider__item-info">
              <div class="program-slider__day">День 5</div>
              <div class="program-slider__title">Наслаждайтесь водопадами</div>
              <div class="program-slider__description">
                Сегодня мы отправимся в Ловину,чтобы встретить диких дельфинов.После этого мы едем в колониальную
                столицу Бали - город
                Сингараджа.Здесь мы посетим старую пристань и поедем в глубь острова, чтобы посетить самый впечатляющий
                водопад острова
                - Секумпул. Вечер мы встретим у подножья вулкана Батур, на берегу одноименного острова.
              </div>
              <div class="program-slider__btns">
                <button class="program-slider__btn"><span class="program-slider__btn-prev">День 4</span></button>
                <button class="program-slider__btn"><span class="program-slider__btn-next">День 6</span></button>
              </div>
              <div class="program-slider__link">Скачать полную программу тура</div>
            </div>
            <div class="program-slider__item-images">
              <img src="images/slider-img.jpg" alt="slide">
            </div>
          </div>
        </div>

        <div class="program-slider__item">
          <div class="program-slider__item-content">
            <div class="program-slider__item-info">
              <div class="program-slider__day">День 5</div>
              <div class="program-slider__title">Наслаждайтесь водопадами</div>
              <div class="program-slider__description">
                Сегодня мы отправимся в Ловину,чтобы встретить диких дельфинов.После этого мы едем в колониальную
                столицу Бали - город
                Сингараджа.Здесь мы посетим старую пристань и поедем в глубь острова, чтобы посетить самый впечатляющий
                водопад острова
                - Секумпул. Вечер мы встретим у подножья вулкана Батур, на берегу одноименного острова.
              </div>
              <div class="program-slider__btns">
                <button class="program-slider__btn"><span class="program-slider__btn-prev">День 4</span></button>
                <button class="program-slider__btn"><span class="program-slider__btn-next">День 6</span></button>
              </div>
              <div class="program-slider__link">Скачать полную программу тура</div>
            </div>
            <div class="program-slider__item-images">
              <img src="images/slider-img.jpg" alt="slide">
            </div>
          </div>
        </div>

        <div class="program-slider__item">
          <div class="program-slider__item-content">
            <div class="program-slider__item-info">
              <div class="program-slider__day">День 5</div>
              <div class="program-slider__title">Наслаждайтесь водопадами</div>
              <div class="program-slider__description">
                Сегодня мы отправимся в Ловину,чтобы встретить диких дельфинов.После этого мы едем в колониальную
                столицу Бали - город
                Сингараджа.Здесь мы посетим старую пристань и поедем в глубь острова, чтобы посетить самый впечатляющий
                водопад острова
                - Секумпул. Вечер мы встретим у подножья вулкана Батур, на берегу одноименного острова.
              </div>
              <div class="program-slider__btns">
                <button class="program-slider__btn"><span class="program-slider__btn-prev">День 4</span></button>
                <button class="program-slider__btn"><span class="program-slider__btn-next">День 6</span></button>
              </div>
              <div class="program-slider__link">Скачать полную программу тура</div>
            </div>
            <div class="program-slider__item-images">
              <img src="images/slider-img.jpg" alt="slide">
            </div>
          </div>
        </div>

        <div class="program-slider__item">
          <div class="program-slider__item-content">
            <div class="program-slider__item-info">
              <div class="program-slider__day">День 5</div>
              <div class="program-slider__title">Наслаждайтесь водопадами</div>
              <div class="program-slider__description">
                Сегодня мы отправимся в Ловину,чтобы встретить диких дельфинов.После этого мы едем в колониальную
                столицу Бали - город
                Сингараджа.Здесь мы посетим старую пристань и поедем в глубь острова, чтобы посетить самый впечатляющий
                водопад острова
                - Секумпул. Вечер мы встретим у подножья вулкана Батур, на берегу одноименного острова.
              </div>
              <div class="program-slider__btns">
                <button class="program-slider__btn"><span class="program-slider__btn-prev">День 4</span></button>
                <button class="program-slider__btn"><span class="program-slider__btn-next">День 6</span></button>
              </div>
              <div class="program-slider__link">Скачать полную программу тура</div>
            </div>
            <div class="program-slider__item-images">
              <img src="images/slider-img.jpg" alt="slide">
            </div>
          </div>
        </div>

        <div class="program-slider__item">
          <div class="program-slider__item-content">
            <div class="program-slider__item-info">
              <div class="program-slider__day">День 5</div>
              <div class="program-slider__title">Наслаждайтесь водопадами</div>
              <div class="program-slider__description">
                Сегодня мы отправимся в Ловину,чтобы встретить диких дельфинов.После этого мы едем в колониальную
                столицу Бали - город
                Сингараджа.Здесь мы посетим старую пристань и поедем в глубь острова, чтобы посетить самый впечатляющий
                водопад острова
                - Секумпул. Вечер мы встретим у подножья вулкана Батур, на берегу одноименного острова.
              </div>
              <div class="program-slider__btns">
                <button class="program-slider__btn"><span class="program-slider__btn-prev">День 4</span></button>
                <button class="program-slider__btn"><span class="program-slider__btn-next">День 6</span></button>
              </div>
              <div class="program-slider__link">Скачать полную программу тура</div>
            </div>
            <div class="program-slider__item-images">
              <img src="images/slider-img.jpg" alt="slide">
            </div>
          </div>
        </div>

      </div>
    </div>
  </section>

  <section class="tour">
    <div class="tour__wrapper">
      <div class="tour__inner" style="background-image: url(images/tour-bg.png);">
        <div class="tour__title title animate-right">О туре</div>
        <div class="tour__subtitle animate-bottom">Открой для себя сказку Сool Trip</div>

        <div class="tour-buy animate-bottom">
          <div class="tour-buy__price">2000$<span>12 ночей</span></div>
          <div class="tour-buy__btn">Купить тур</div>
          <div class="tour-buy__text">Ещё мы знаем где купить билеты и оформить страховку по выгодным ценам</div>
        </div>

        <div class="tour__content animate-bottom">
          <div class="tour__content-info">
            <div class="tour__content-title">В стоимость включено:</div>
            <ul class="tour__content-list tour__content-list--left">
              <li>Трансфер из аэропорта-в аэропорт</li>
              <li>Транспорт по всему маршруту</li>
              <li>Посещение СПА-центра</li>
              <li>Приветственный ужин</li>
              <li>2 урока серфингас лучшими инструкторами</li>
              <li>Проживание в отелях 4-5 звезд с завтраками</li>
              <li>Сопровождение гида во время всей поездки</li>
            </ul>
          </div>
          <div class="tour__content-datetour">
            <div class="tour__content-title title-date">Дата тура:</div>
            <div class="tour__content-date">7-18 февраля 2020 года</div>
            <div class="tour__content-date__subtitle">Не включено:</div>
            <ul class="tour__content-list tour__content-list--right">
              <li>Авиабилеты туда-обратно (450$)</li>
              <li>Страховка (15-20$)</li>
              <li>Питание (10-15$)</li>
              <li>Одноместный номер (60$)</li>
              <li>Питание (10-15$)</li>
            </ul>
          </div>
        </div>
      </div>

      <div class="tour__subcription animate-bottom">
        <div class="tour__subcription-title">
          Чтобы первым узнать о следующих путешествий,подпишитесь на нашу рассылку
        </div>
        <form class="tour__form">
          <input class="tour__form-input" type="email" placeholder="Ваш е-mail">
          <button class="tour__form-btn" type="submit">Подписаться</button>
        </form>
      </div>

    </div>
  </section>

  <section class="bali">
    <div class="bali__wrapper" style="background-image: url(images/bali-bg.png);">
      <div class="bali__title title animate-left">О Бали</div>
      <div class="bali__subtitle animate-bottom">Бали-настоящее сокровище Индонезии,остров богов,мощной
        энергетики,необыкновенной
        красивой природы...</div>
      <div class="bali__text animate-bottom">Здесь есть всё о чём только мечтают путешественники</div>
      <div class="bali__items">

        <div class="bali__item animate-bottom">
          <img src="images/icon-bali-1.svg" alt="icon-bali-1">
          <div class="bali__item-text">Великолепные пляжи</div>
        </div>

        <div class="bali__item animate-bottom">
          <img src="images/icon-bali-2.svg" alt="icon-bali-2">
          <div class="bali__item-text">Старинные храмы</div>
        </div>

        <div class="bali__item animate-bottom">
          <img src="images/icon-bali-3.svg" alt="icon-bali-3">
          <div class="bali__item-text">Удивительные вулканы</div>
        </div>

        <div class="bali__item animate-bottom">
          <img src="images/icon-bali-4.svg" alt="icon-bali-4">
          <div class="bali__item-text">Богатый животный мир</div>
        </div>

        <div class="bali__item animate-bottom">
          <img src="images/icon-bali-5.svg" alt="icon-bali-5">
          <div class="bali__item-text">Индийский океан</div>
        </div>

        <div class="bali__item animate-bottom">
          <img src="images/icon-bali-6.svg" alt="icon-bali-6">
          <div class="bali__item-text">Величественные горы</div>
        </div>

      </div>
    </div>

    <div class="bali__content animate-bottom">
      <div class="bali__content-img">
        <img src="images/bali-content.png" alt="bali-content-images">
      </div>
      <div class="bali__content-text">
        <div class="bali__content-text--top">
          Мы с вами побываем в причудливых храмах духовного, мистического Бали, отдохнем на сказочных пляхаж, послушаем
          океан,
          научимся серфить и поймаем идеальную волну
        </div>
        <div class="bali__content-text--bottom">
          Посетим, воспетый в фильме “Ешь. Молись. Люби.” нелбыкновенный Убуд, искупаемв водопаде, полюбуемся вулканами
          и
          пообщаемся с местными
        </div>
      </div>
    </div>
  </section>

  <section class="reviews" style="background-image: url(images/reviews-bg.png);">
    <div class="container">
      <div class="reviews__title title animate-right">Отзывы путешественников</div>
      <div class="reviews__name animate-bottom">Артём</div>
      <div class="reviews__content animate-bottom">
        <div class="reviews__content-img">
          <img src="images/reviews-photo.jpg" alt="reviews-photo">
        </div>
        <div class="reviews__content-description">
          <div class="reviews__content-text">
            Завтрак состоял из экзотических фруктов, главного блюда на выбор, свежевыжатых соков чая и кофе.И это всё
            можно заказать
            и съесть прямо в басейне, что мы и сделали в один из дней.
          </div>
          <div class="reviews__content-link">Читать далее</div>
        </div>
      </div>
    </div>
  </section>

  <section class="photo">
    <div class="photo__title title animate-left">Фото с прошлых туров</div>

    <div class="photo-slider__up">
      <div class="photo-slider__item--up">
        <img src="images/photo-slider-3.jpg" alt="photo-slider-3">
      </div>

      <div class="photo-slider__item--up">
        <iframe src="https://www.youtube.com/embed/0UFCRBIg3Y0" frameborder="0"
          allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>

      <div class="photo-slider__item--up">
        <img src="images/photo-slider-1.jpg" alt="photo-slider-1">
      </div>
    </div>

    <div class="photo-slider__down">
      <div class="photo-slider__item--down">
        <img src="images/photo-slider-1.jpg" alt="photo-slider-1">
      </div>
      <div class="photo-slider__item--down">
        <img src="images/photo-slider-2.jpg" alt="photo-slider-2">
      </div>
      <div class="photo-slider__item--down">
        <img src="images/photo-slider-3.jpg" alt="photo-slider-3">
      </div>
    </div>

    <div class="photo-bottom">
      <div class="photo-bottom__title animate-bottom">Подписывайся на нас в инстаграмме, ставь хэштэг #Сool Trip и самые
        лучшие фото
        попадут к нам на сайт</div>
      <div class="photo-bottom__subtitle animate-bottom">Больше фото и видео у нас в соц.сетях:</div>
      <div class="photo-bottom__icons animate-bottom">
        <a class="photo-bottom__icon" href="#">
          <img src="images/youtube.svg" alt="photo-icon-1">
        </a>
        <a class="photo-bottom__icon" href="#">
          <img src="images/twitter.svg" alt="photo-icon-2">
        </a>
        <a class="photo-bottom__icon" href="#">
          <img src="images/vk.svg" alt="photo-icon-3">
        </a>
      </div>
    </div>

  </section>

  <section class="go" style="background-image: url(images/go-bg.png);">
    <div class="container">
      <div class="go__title title animate-right">Поехали с нами</div>
      <div class="go__subtitle animate-bottom">Вы точно решили ехать с нами?</div>
      <div class="go__buttons">
        <a class="go__button go__button--left animate-bottom">Точно еду!</a>
        <a class="go__button go__button--right animate-bottom">Ещё сомневаюсь</a>
      </div>
    </div>

    <footer class="footer">
      <div class="container">
        <div class="footer__inner">
          <div class="footer__logo animate-bottom">
            <a href="href">Cool Trip</a>
          </div>

          <ul class="footer__menu-list animate-bottom">
            <li><a href="#">Маршрут</a></li>
            <li><a href="#">Стоимость</a></li>
            <li><a href="#">Фото и Видео</a></li>
            <li><a href="#">Контакты</a></li>
          </ul>

          <div class="footer__btn animate-bottom">
            <a href="#">Заказать звонок</a>
          </div>

          <div class="footer__info animate-bottom">
            <a class="footer__info-tel" href="tel:79897753237">+7(989)-775-32-37</a>
            <a class="footer__info-email" href="mailti:cool_bali@gmail.com">cool_bali@gmail.com</a>
          </div>

          <div class="footer__icons animate-bottom">
            <a href="" class="footer__icon">
              <img src="images/youtube.svg" alt="footer__icon-youtube">
            </a>
            <a href="" class="footer__icon">
              <img src="images/twitter.svg" alt="footer__icon-twitter">
            </a>
            <a href="" class="footer__icon">
              <img src="images/vk.svg" alt="footer__icon-vk">
            </a>
          </div>
        </div>
      </div>
    </footer>
  </section>

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"
    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <script src="js/slick.min.js"></script>
  <script src="js/main.js"></script>
  <script src="https://unpkg.com/scrollreveal"></script>

</body>

</html>